<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <div class="header">
      <div class="title">
        <div class="title-h" @click="back()">
          <div class="icon"></div>
          <div class="txt-h">完成</div>
        </div>
      </div>
    </div>
    <div class="content_panel">
      <div class="icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ionicon"
          viewBox="0 0 512 512"
        >
          <path
            d="M480 173.59c0-104.13-68.26-134.65-68.26-134.65C377.3 23.15 318.2 16.5 256.8 16h-1.51c-61.4.5-120.46 7.15-154.88 22.94 0 0-68.27 30.52-68.27 134.65 0 23.85-.46 52.35.29 82.59C34.91 358 51.11 458.37 145.32 483.29c43.43 11.49 80.73 13.89 110.76 12.24 54.47-3 85-19.42 85-19.42l-1.79-39.5s-38.93 12.27-82.64 10.77c-43.31-1.48-89-4.67-96-57.81a108.44 108.44 0 01-1-14.9 558.91 558.91 0 0096.39 12.85c32.95 1.51 63.84-1.93 95.22-5.67 60.18-7.18 112.58-44.24 119.16-78.09 10.42-53.34 9.58-130.17 9.58-130.17zm-80.54 134.16h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24 0-36.06 15.53-36.06 46.24v67h-49.66v-67c0-30.71-12-46.24-36.06-46.24-21.72 0-32.58 13.09-32.58 38.89v122.37h-50V181.67q0-38.65 19.75-61.39c13.6-15.15 31.4-22.92 53.51-22.92 25.58 0 44.95 9.82 57.75 29.48L256 147.69l12.45-20.85c12.81-19.66 32.17-29.48 57.75-29.48 22.11 0 39.91 7.77 53.51 22.92q19.79 22.72 19.75 61.39z"
          />
        </svg>
      </div>
      <div class="info_txt">
        <div class="message">支付成功</div>
        <div class="pay">{{pay}}元</div>
        <div class="pay_all">{{pay_all}}元</div>
      </div>
    </div>
    <!-- 付款信息 -->
    <div class="pay-info">
      <div class="title">付款信息</div>
      <div class="pay-from">{{pay_from}}</div>
      <div class="pay-num">{{pay}}</div>
    </div>
  </div>
</template>
<script>
//引入外部组件
//import menu from ''
export default {
  name: "PaySuccessful", //定义组件的名称
  data(){
    return{
       pay:0,
       pay_all:0,
       pay_from:"余额"
    }
  },
  mounted(){
      this.pay = this.$route.params.pay;
      this.pay_all = this.$route.params.pay;
  },
  methods: {
    back() {
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
/* 顶部搜索栏 */
.header {
  background-color: #ffffff;
  color: #000;
  width: 100%;
}

.header .title {
  font-size: 18px;
  margin-left: 20px;
  padding: 20px 0;
}

.title-h {
  display: flex;
  flex-direction: row-reverse;
  vertical-align: middle;
  align-items: center;
}

.title-h .icon {
  width: 30px;
  height: 30px;
}

.title-h .txt-h {
  color: #1678ff;
}

/* 支付成功内容 */
.content_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.content_panel .icon svg {
  width: 100px;
  fill: #1678ff;
}

.info_txt {
  padding: 10px 0 30px 0;
}

.message {
  color: #1678ff;
  font-size: 22px;
}

.pay {
  font-size: 35px;
  color: #000;
}

.pay_all {
  font-size: 18px;
  text-decoration: line-through;
}

/* 付款信息 */
.pay-info {
  position: relative;
  padding: 20px;
  font-size: 20px;
  display: flex;
  border-top: solid 1px #ccc;
}

.pay-from {
  color: #000;
  margin-left: 20px;
}

.pay-num {
  color: #000;
  position: absolute;
  right: 20px;
}
</style>